<template>
  <el-dialog
    title="查看"
    :visible.sync="visible"
    width="888px"
    :before-close="handleClose"
  >
    <div style="margin-top: -15px">
      <el-tabs v-model="activeName">
        <el-tab-pane label="工单基本内容" name="first">
          <basic-item :row="data" />
        </el-tab-pane>
        <!-- 指派类 -->
        <el-tab-pane
          label="处理结果"
          name="second"
          v-if="
            data.workType == 1 &&
            data.replyVO &&
            data.appointStatus != 0 &&
            data.appointStatus != 1
          "
        >
          <el-descriptions :column="2" border v-if="data.replyVO">
            <el-descriptions-item label="处理人">{{
              data.replyVO.userName
            }}</el-descriptions-item>
            <el-descriptions-item ns-item label="处理时间">{{
              data.replyVO.replyTime
            }}</el-descriptions-item>
            <el-descriptions-item label="问题描述" :span="2">{{
              data.replyVO.reason
            }}</el-descriptions-item>
            <el-descriptions-item label="材料费" :span="2">
              <el-table :data="data.replyVO.costVOList">
                <el-table-column prop="costName" label="费用名称">
                </el-table-column>
                <el-table-column prop="quantity" label="数量"></el-table-column>
                <el-table-column prop="price" label="单价"></el-table-column>
              </el-table>
            </el-descriptions-item>
            <el-descriptions-item label="附  件" :span="2">
              <el-table :data="JSON.parse(data.replyVO.annex)">
                <el-table-column prop="name" label="名称">
                  <template slot-scope="scope">
                    <el-tooltip
                      popper-class="ellipsis-tip"
                      :content="scope.row.name"
                      placement="top-start"
                    >
                      <span class="ellipsis">{{ scope.row.name }}</span>
                    </el-tooltip>
                  </template></el-table-column
                >
                <el-table-column prop="size" label="大小"></el-table-column>
                <el-table-column
                  prop="content"
                  label="操作"
                  width="100px"
                  align="center"
                >
                  <template slot-scope="scope">
                    <el-link
                      type="primary"
                      :underline="false"
                      @click="downloadFile(scope.row)"
                      >下载</el-link
                    >
                  </template>
                </el-table-column>
              </el-table>
            </el-descriptions-item>
            <el-descriptions-item label="备注" :span="2">{{
              data.replyVO.remarks
            }}</el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <!-- 流程类 -->
        <el-tab-pane
          label="处理流程及结果"
          name="third"
          v-if="
            data.workType == 0 &&
            data.appointStatus != 0 &&
            data.appointStatus != 1
          "
          ><el-table
            :data="data.nodeUsers"
            :header-cell-style="{ background: '#F6F7F9' }"
          >
            <el-table-column prop="title" label="节点名称"> </el-table-column>
            <el-table-column prop="taskUserName" label="处理人">
            </el-table-column>
            <el-table-column label="处理结果">
              <template slot-scope="scope">
                <span v-if="scope.row.status == 0">正在执行中</span>
                <span v-if="scope.row.status == 1">通过</span>
                <span v-if="scope.row.status == 2">驳回</span>
                <span v-if="scope.row.status == 3">拒绝</span>
              </template>
            </el-table-column>
            <el-table-column prop="auditNote" label="处理意见">
              <template slot-scope="scope">
                <el-tooltip
                  popper-class="ellipsis-tip"
                  :content="scope.row.auditNote"
                  placement="top-start"
                >
                  <span class="ellipsis">{{ scope.row.auditNote }}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="updateTime" label="处理时间">
            </el-table-column>
            <el-table-column label="附件" width="50px" align="center">
              <template slot-scope="scope">
                <el-link
                  type="primary"
                  :underline="false"
                  @click="view(scope.row)"
                  >查看</el-link
                >
              </template>
            </el-table-column>
          </el-table></el-tab-pane
        >
      </el-tabs>
    </div>
    <file-preview :visible="isLook" :data="lookData" @close="isLook = false" />
  </el-dialog>
</template>
<script>
import basicItem from './../components/basic'
import filePreview from '@c/filePreview'
export default {
  name: 'detail',
  components: { basicItem, filePreview },
  props: {
    visible: {
      type: Boolean,
      default: () => {
        return false
      },
    },
    data: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  watch: {
    visible() {
      if (this.visible) {
        this.activeName = 'first'
      }
    },
  },
  data() {
    return {
      activeName: 'first',
      lookData: [],
      isLook: false,
    }
  },
  methods: {
    downloadFile(item) {
      //下载附件
      const a = document.createElement('a')
      a.download = item.name
      a.href = item.fileDomain + item.url
      a.click()
    },
    view(item) {
      //查看
      this.lookData = this.fileArr(item.auditFile)
      this.isLook = true
    },
    handleClose() {
      this.$emit('close')
    },
    fileArr(fileStr) {
      if (Object.prototype.toString.call(fileStr).slice(8, -1) === 'Array') {
        return fileStr
      } else {
        let arrtry = []
        try {
          arrtry = fileStr ? JSON.parse(fileStr) : []
          return arrtry
        } catch (error) {
          arrtry = []
          return arrtry
        }
      }
    },
  },
}
</script>
